27 Februari 2024

Do’a Belajar

Outline

  • UX Design Framework
  • Design Thinking
  • Double Diamond
  • Case Study: Design Thinking
  • Case Study: Double Diamond

UX Design Framework

Apa itu framework?

Framework adalah kerangka kerja yang dibuat untuk membantu pengembang untuk menuliskan informasi secara terstruktur dan rapih dengan tujuan mempermudah pekerjaan.

Mengapa framework?

Ketika kita bekerja biasanya banyak yang dilakukan. Sehingga membuat kadang lupa apa yang seharusnya dilakukan.

Tugas framework adalah membuat pekerjaan tetap lurus dan tidak melenceng.

Framework = Buku Resep

Buku resep menginformasikan bumbu dan tahapan membuat masakan Framework menginformasikan cara menyiapkan dan membuat produk

UX Design Framework

UX Design Framework adalah kerangka berfikir untuk mempermudah pekerjaan dan membuat desain yang sukses.

Apa itu desain yang sukses?

Desain yang sukses adalah desain yang menyelesaikan masalah pengguna

Tujuan UX Design Framework

Menggunakan UX design framework membuat pekerjaan lebih mudah

Fungsi UX Design Framework

  • Memastikan semua orang paham tujuan dan sasaran project
  • Membantu menjaga desain tetap pada jalurnya
  • Memastikan seluruh pekerjaan memenuhi kebutuhan dan harapan pengguna

Contoh UX Design Framework

Design Thinking

Apa itu Design Thinking?

Design thinking adalah framework yang digunakan untuk:
    • Memahami pengguna,
    • Mencoba asumsi,
    • Mendefinisikan masalah dan
    • Menciptakan solusi inovatif pada prototipe yang akan diujicobakan pada pengguna.

Tahapan Design Thinking

Emphatize

Emphatize atau berempati berarti memahami masalah pengguna dengan melakukan riset.

Hal yang dilakukan:
    • Melakukan riset pengguna
    • Mendapatkan insights sebenarnya dari apa yang user perlukan.

Define

Define adalah tahapan mengumpulkan informasi pada empathize.

Hal yang dilakukan:
    • Melakukan analisa berdasarkan pengamatan dan hasil temuan
    • Mendefinisikan problem statement

Problem Statement

Kalimat yang mendefinisikan sebuah masalah.

[User] membutuhkan [User’s Need] karena [Insight]

Ideate

Ideate adalah tahapan menemukan solusi terbaik dengan brainstorming.

Hal yang dilakukan:
    • Mencoba “think outside the box” Mencoba alternatif dari masalah
    • Mengidentifikasi solusi innovatif dari masalah yang ingin diselesaikan.

Brainstorming

Proses mencari ide sebanyak mungkin tanpa memperdulikan apakah ide tersebut bagus atau tidak.

Tujuannya, mungkin temuan ide dapat dikombinasikan dengan ide lainnya untuk membuat ide yang menarik

Cara Mendapatkan Ide

Gunakan “How Might We…” atau “Bagaimana Jika Kita…”

“How might we” atau “bagaimana jika kita…” membantu mendapatkan ide yang beragam dan fokus dengan masalalah

Prototype

Prototype adalah tahapan memproduksi produk dengan biaya murah dan bentuk sederhana.

Hal yang dilakukan:
    • Membuat rancangan sederhana aplikasi
    • Menentukan kebutuhan fitur
    • Menentukan teks, warna dan bentuk yang digunakan pada prototype

Test

Test adalah tahapan ujicoba kembali dengan pengguna.

Hal yang dilakukan:
    • Menguji prototype dengan pengguna.
    • Menentukan prototype terbaik.
    • Menyempurnakan prototype.

Solusi terbaik dipilih menjadi jawaban masalah yang ditemukan.

Double Diamond

Double Diamond

Double diamond adalah diagram yang menjelaskan proses design thinking.

Double diamond mendetailkan proses berpikir dalam proses menemukan masalah hingga solusi.

Tahapan Double Diamond

Discover

Tujuan discover adalah untuk menemukan masalah

Hal yang dilakukan:
    • Mencari masalah pada pengguna dengan survey, interview, atau data.

Proses ini melebar karena menemukan berbagai masalah pada pengguna.

Define

Tahapan define akan menentukan masalah utama dari berbagai temuan.

Hal yang dilakukan:
    • Mendefinisikan “Apa masalah yang ingin diselesaikan?”
    • Membuat problem statement.

Proses ini mengerucut karena menemukan masalah utama pengguna.

Problem Statement

Kalimat yang mendefinisikan sebuah masalah.

[User] membutuhkan [User’s Need] karena [Insight]

Develop

Tahapan develop adalah menemukan ide solusi yang sebanyak-banyaknya.

Hal yang dilakukan:
    • Melakukan brainstorming untuk menemukan ide sebanyak-banyaknya

Proses ini melebar karena menemukan berbagai ide untuk menyelesaikan masalah pengguna.

Brainstorming

Proses mencari ide sebanyak mungkin tanpa memperdulikan apakah ide tersebut bagus atau tidak.

Tujuannya, mungkin temuan ide dapat dikombinasikan dengan ide lainnya untuk membuat ide yang menarik

Cara Mendapatkan Ide

Gunakan “How Might We…” atau “Bagaimana Jika Kita…”

“How might we” atau “bagaimana jika kita…” membantu mendapatkan ide yang beragam dan fokus dengan masalalah

Deliver

Tahapan deliver adalah mempersiapkan desain dari solusi yang ingin diuji.

Hal yang dilakukan:
    • Menentukan ide hasil brainstorming
    • Memilih ide yang akan diujicoba
    • Membuat prototype ide
    • Berdiskusi dengan pengguna

Proses ini mengerucut karena akan mencari solusi utama.

Case Study: Design Thinking

Design Thinking

Emphatize

Ardi adalah seorang pemilik usaha UMKM yang ingin memiliki website, tetapi ia tidak mengetahui kebutuhan dan website apa yang diperlukan pengguna.

Apa yang Ardi harus lakukan?

Tindakan Ardi

Bertanya menghilangkan kebingungan pada pengguna

Apa kata pengguna?

Apa kata pengguna?

Kesimpulannya:

  • Menampilkan informasi kandungan pada produk
  • Menampilkan informasi produk serupa lainnya
  • Review yang berasal dari berbagai influencer

Define

Berdasarkan jawaban pengguna maka:
    • Informasi kandungan produk
    • Informasi produk lainnya
    • Review dari berbagai influencer Sehingga terbentuklah problem statement…

Problem Statement

Calon pembeli membutuhkan sebuah website yang menjelaskan produknya dengan jelas karena mereka tidak mengetahui kandungan, jenis produk lainnya dan review produk tersebut.

Ideate

Ardi mengetahui yang akan dilakukan.

Sehingga ia melakukan brainstorming kebutuhan pengguna dan menyiapkan desain wireframe.

Wireframe

Wireframe itu seperti gambar kasar dari website atau aplikasi.

Wireframe menunjukkan tata letak, elemen-elemen, dan bagaimana pengguna akan berinteraksi dengan website atau aplikasi.

Brainstroming

“Bagaimana cara kita untuk membuat website yang mampu menginformasikan calon pembeli mengetahui kandungan, jenis produk lain dan review produknya?”

Brainstroming

Brainstroming

Sketsa Wireframe

Prototype

Ardi telah mempersiapkan wireframe. Ia kemudian membuat versi yang lebih detail yaitu prototype.

Pada bagian ini, tampilan website akan lebih baik karena menggunakan kombinasi teks, warna dan bentuk.

Prototype

Test

Prototype yang dibuat akan kembali didiskusikan dengan calon pembeli untuk mencari tahu desain seperti apa yang membantu pengguna untuk mencapai requirement.

Testing

Prototype

Prototype